<template>
  <div class="user">
    <van-pull-refresh
      v-model="Refresh"
      @refresh="onLoad"
      success-text="刷新成功"
      style="min-height: 100vh"
    >
      <div class="header">
        <div class="decorate decorate1"></div>
        <div class="decorate decorate2"></div>
        <div class="userheader">
          <div>
            <!-- src="https://bpic.588ku.com/element_origin_min_pic/19/05/28/6f61ca88e7934dbe7b0129e669f91c46.jpg" -->
            <img
              class="portrait"
              src="http://www.higuang365.com/public/app/b2c/statics/sprites/default-avatar.png"
            />
          </div>
          <div class="username">
            <div v-if="$store.state.userInfo.F_Account">
              <span>{{ $store.state.userInfo.F_Account }}</span>
              <div>
                {{ OpenId[$store.state.userInfo.F_SecurityLevel] }}
              </div>
            </div>
            <router-link to="/login" v-else>登录</router-link>
            <Qrcode
              class="qrcode"
              v-if="!Refresh && $store.state.userInfo.F_UserId"
            />
          </div>
        </div>
        <div class="buys" v-if="$store.state.userInfo.F_UserId">
          <div>累计购买：￥{{ price ? price : 0 }}</div>
        </div>
        <div
          class="apply"
          v-if="
            $store.state.userInfo.F_UserId &&
            $store.state.userInfo.F_CheckOnLine != 2
          "
        >
          <!-- <div class="apply" v-if="false"> -->
          <div
            class="applyShop"
            v-if="$store.state.userInfo.F_SecurityLevel != 18"
            @click="$router.push('/register/natural')"
          >
            申请店铺
          </div>
          <div v-else @click="$router.push('/register/shop')">店铺资格认证</div>
        </div>
        <div class="setting" @click="outlogin">
          <van-icon name="setting-o" />
        </div>
      </div>

      <!-- <Authentication /> -->
      <ApplyTips v-if="!Refresh && $store.state.userInfo.F_UserId" />
      <ModuleList v-if="!Refresh && $store.state.userInfo.F_UserId" />
      <div></div>
      <van-action-sheet
        v-model:show="vanactionshow"
        cancel-text="取消"
        description="选项"
        close-on-click-action
        ><div
          class="van-action-items"
          v-for="(value, index) in actions"
          :key="index"
          @click="value.click"
        >
          {{ value.name }}
        </div>
      </van-action-sheet>
    </van-pull-refresh>
    <NavBar />
  </div>
</template>

<script>
import NavBar from "@/components/home/NavBar"; //
import ApplyTips from "@/components/user/index/applytips";
import Qrcode from "@/components/user/qrcode";
import ModuleList from "@/components/user/moduleList";
import { useStore } from "vuex";
import { reactive, toRefs } from "vue";
import { GetMemberInfo, Get_LJshouy } from "@/api/user";
import { removeAccessToken } from "@/lib/accessToken";
export default {
  components: {
    NavBar,
    ApplyTips,
    Qrcode,
    ModuleList,
  },
  setup() {
    const store = useStore();
    const data = reactive({
      OpenId: { 1: "会员", 13: "plus会员", 18: "微店" },
      vanactionshow: false,
      actions: [
        {
          name: "返回商城",
          click: () => {
            window.location.href = "http://www.higuang365.com/wap";
          },
        },
        {
          name: "退出登录",
          click: () => {
            store.commit({
              type: "GetuserInfo",
              userInfo: "",
            });
            store.commit({ type: "setAccessToken", accessToken: "" });
            data.vanactionshow = false;
            removeAccessToken();
          },
        },
      ],
      Refresh: false,
      price: "0",
    });
    const outlogin = () => {
      data.vanactionshow = true;
    };
    const onLoad = async () => {
      const res = await GetMemberInfo({
        username: store.state.userInfo.F_Account,
      });
      data.Refresh = false;
      if (!res[0]) {
        return;
      }
      store.commit({
        type: "GetuserInfo",
        userInfo: res[1][0],
      });
      LJshouy();
    };
    const LJshouy = async () => {
      const res = await Get_LJshouy({
        member_id: store.state.userInfo.F_UserId,
      });
      if (!res[0] || res[1].length == 0) {
        return;
      }
      data.price = res[1][0].Price;
    };
    LJshouy();
    return { ...toRefs(data), outlogin, onLoad };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";
.qrcode {
  width: 7rem;
  height: 7rem;
  border-radius: 0.5rem;
}
.user {
  height: 100vh;
  background: #f7f7f7;
  font-size: 1.4rem;
  .portrait {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
  }
  .header {
    padding: 5rem 3rem 4rem;
    position: relative;
    background: linear-gradient(0deg, #f7f7f7, #e2ffe9);
    color: #000;
    // background: linear-gradient(to right, #7fdbca, #50a996);

    // background: linear-gradient(to right, $green, $green);
    // color: #fff;
    .setting {
      position: absolute;
      right: 3rem;
      top: 2rem;
      font-size: 2rem;
    }

    .userheader {
      display: flex;
      .username {
        display: flex;
        margin-left: 2rem;
        justify-content: space-between;
        width: 100%;
        align-items: flex-end;
      }
    }
    .apply {
      position: absolute;
      right: 2rem;
      bottom: 1rem;
      background: rgba(199, 199, 199, 0.3);
      color: #4b4b4b;
      padding: 0.2rem 1rem;
      border-radius: 2rem;
    }
    .buys {
      position: absolute;
      left: 2rem;
      bottom: 1rem;
      background: transparent;
      color: #c8c8c8;
      padding: 0.2rem 1rem;
      border-radius: 2rem;
    }
  }
}
.decorate {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  //     transform: rotate(
  // 24deg
  // );
  background: linear-gradient(
    35deg,
    rgba(255, 255, 255, 0.1),
    24%,
    rgba(255, 255, 255, 0)
  );
}
.decorate1 {
  right: 4rem;
  top: 0rem;
  width: 6rem;
  height: 6rem;
}
.decorate2 {
  right: 6rem;
  width: 10rem;
  height: 10rem;
  top: 2rem;
}
.van-action-items {
  padding: 1rem;
  position: relative;
  &:after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    transform: scaleY(0.5);
  }
}
</style>
